
<!-- 数据科学与大数据一班  F21600122周群  2024/1/4 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href='css/10.2.css' />
	</head>
	<body>
		<div class="header">
			<div class="one">
				<div class="four">
					<div><button id="backButton" onclick="goBack()">
							<p><</p>
						</button>
					</div>
				</div>
				<div class="two">
					<div><img src="img/zhidubao.png" alt="cc" class="img1" /></div>
					<div class="three">付款</div>
				</div>
				<div class="popup-container" id="popupContainer" >

					<!-- 这是将会弹出的内容区块 -->
					<div class="popup-content">
						<div class="ku">
							<div>我的客服</div>
							<div>问题反馈</div>
							<div>下载支付宝</div>
						</div>
						<span id="closeButton" class="close-button">&#10005;</span>
					</div>
				</div>

				<div>
					<button id="myButton" class="san">
						<p>...</p>
					</button>
				</div>
			</div>
			<div class="payment-password">
				<div class="item2"> <label for="password-input">输入支付密码</label></div>

				<div class="centered-container">
					<div id="password-container">
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
						<input type="password" class="password-box" maxlength="1" inputmode="numeric" />
					</div>
				</div>
				<div class="six"> <button id="submit-button" class="button-color" disabled>确认支付</button></div>

				<div id="paymentSuccessModal" class="modal">
					<!-- 弹窗内容 -->
					<div class="modal-content">
						<span class="close">&times;</span>
						<p>支付成功！</p>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		function goBack() {
			window.history.back();
		}
		// 获取全部的密码框和确认支付按钮
		const passwordInputs = document.querySelectorAll('.password-box');
		const submitButton = document.getElementById('submit-button');

		// 检查所有输入框是否都被填写了
		function checkInputs() {
			for (let i = 0; i < passwordInputs.length; i++) {
				if (passwordInputs[i].value === '') {
					submitButton.disabled = true;
					return; // 提前退出，如果发现空的输入框
				}
			}
			// 如果所有的输入框都填写了，激活确认支付按钮
			submitButton.disabled = false;
		}

		// 密码框填写逻辑和自动跳转到下一个输入框
		passwordInputs.forEach((input, index, inputs) => {
			input.addEventListener('input', (event) => {
				if (event.target.value.length > 1) {
					event.target.value = event.target.value[0]; // 只允许一个字符
				}

				// 检查是否启用按钮
				checkInputs();

				// 跳转到下一个输入框
				if (event.target.value.length === 1 && index < inputs.length - 1) {
					inputs[index + 1].focus();
				}
			});

			// 当前面的输入框被删除内容移到前面的框
			input.addEventListener('keyup', (event) => {
				if (event.key === 'Backspace' && index > 0 && inputs[index].value === '') {
					inputs[index - 1].focus();
				}
			});
		});

		// 弹窗逻辑
		const paymentSuccessModal = document.getElementById('paymentSuccessModal');
		const closeButton = document.querySelector('.close');

		submitButton.addEventListener('click', () => {
			paymentSuccessModal.style.display = 'block';
		});

		closeButton.addEventListener('click', () => {
			paymentSuccessModal.style.display = 'none';
		});

		// 点击窗口外面关闭弹窗
		window.addEventListener('click', (event) => {
			if (event.target === paymentSuccessModal) {
				paymentSuccessModal.style.display = 'none';
			}
		});

		document.addEventListener('DOMContentLoaded', (event) => {
			const myButton = document.getElementById('myButton');
			const popupContainer = document.getElementById('popupContainer');
			const closeButton = document.getElementById('closeButton');

			// 显示弹出层
			myButton.addEventListener('click', () => {
				popupContainer.style.display = 'block'; // 显示弹出层
				setTimeout(() => {
					const twoThirdsScreenHeight = window.innerHeight * 1/10;
					popupContainer.style.bottom = twoThirdsScreenHeight + 'px'; 
				}, 10); // 使用setTimeout确保浏览器有时间识别初始状态
			});

			// 隐藏弹出层
			closeButton.addEventListener('click', () => {
				popupContainer.style.bottom = '0'; // 移动回屏幕底部

				// 为了能够在动画完成之后隐藏元素，使用transitionend事件
				popupContainer.addEventListener('transitionend', function handler(e) {
					popupContainer.style.display = 'none'; // 隐藏弹出层
					popupContainer.removeEventListener('transitionend', handler); // 清除事件监听器
				});
			});
		});
	</script>
</html>